<template>
  <el-dialog
    :title="id ? '编辑优惠券' : '添加优惠券'"
    :visible.sync="visible"
    width="550px"
    :before-close="
      () => {
        $emit('close');
      }
    "
  >
    <el-form
      size="small"
      :rules="rules"
      :model="form"
      ref="couponForm"
      label-width="100px"
    >
      <el-form-item label="名称" prop="coupon_name">
        <el-input v-model="form.coupon_name"></el-input>
      </el-form-item>
      <el-form-item v-if="status == 1" label="优惠券分类" prop="scope">
        <el-cascader
          size="small"
          v-model="form.scope"
          :options="kindList"
          :props="casProps"
          expand-trigger="hover"
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item v-else label="商品货号" prop="scope">
        <el-input v-model="form.scope"></el-input>
      </el-form-item>
      <el-form-item label="起止日期" prop="timeRange">
        <el-date-picker
          v-model="form.timeRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          size="small"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="满减" prop="minus">
        满<el-input
          style="width:100px"
          type="number"
          :min="0"
          v-model="form.meet"
        ></el-input>
        减<el-input
          style="width:100px"
          type="number"
          :min="0"
          v-model="form.minus"
        ></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="number">
        <el-input v-model="form.number"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addCoupon, getCouponDetail } from "@/api/promotion-mng";
import { getPropClassList } from "@/api/good-mng";
export default {
  props: ["visible", "id", "status"],
  data() {
    return {
      form: {
        scope: null,
        coupon_name: null,
        meet: null,
        minus: null,
        number: null,
        timeRange: null
      },
      rules: {
        scope: [{ required: true, message: "请填写优惠对象", trigger: "blur" }],
        coupon_name: [
          { required: true, message: "请填写优惠券名称", trigger: "blur" }
        ],
        minus: [{ required: true, message: "请输入优惠金额", trigger: "blur" }],
        number: [
          { required: true, message: "请输入优惠券数量", trigger: "blur" }
        ],
        timeRange: [
          { required: true, message: "请输入有效时间", trigger: "blur" }
        ]
      },
      casProps: {
        expandTrigger: "hover",
        checkStrictly: true,
        value: "id",
        label: "kind_name",
        children: "lower"
      },
      kindList: []
    };
  },
  watch: {
    visible: function(val) {
      if (val) {
        getCouponDetail({ id: this.id }).then(res => {
          if (res.code === 200) {
            this.kindList = res.data.kind;
            if (this.id) {
              this.form.coupon_name = res.data.coupon.coupon_name;
              this.form.meet = res.data.coupon.meet;
              this.form.minus = res.data.coupon.minus;
              this.form.number = res.data.coupon.number;
              this.form.timeRange = [
                res.data.coupon.start_at,
                res.data.coupon.stop_at
              ];
              if (this.status == 1) {
                for (let i = 0; i < this.kindList.length; i++) {
                  let isFinished = false;
                  for (let j = 0; j < this.kindList[i].lower.length; j++) {
                    if (this.kindList[i].lower[j].id == res.data.coupon.scope) {
                      this.form.scope = [
                        this.kindList[i].id,
                        this.kindList[i].lower[j].id
                      ];
                      isFinished = true;
                      break;
                    }
                  }
                  if (isFinished) break;
                }
              } else {
                this.form.scope = res.data.coupon.scope;
              }
            }
          }
        });
      } else {
        this.$refs["couponForm"].resetFields();
      }
    }
  },
  methods: {
    submit() {
      this.$refs["couponForm"].validate(valid => {
        if (valid) {
          let obj = {
            status: this.status,
            coupon_name: this.form.coupon_name,
            meet: this.form.meet,
            number: this.form.number,
            start_at: this.form.timeRange[0],
            stop_at: this.form.timeRange[1],
            minus: this.form.minus,
            id: this.id ? this.id : null,
            scope: this.status == 1 ? this.form.scope[1] : this.form.scope
          };
          addCoupon(obj).then(res => {
            if (res.code === 200) {
              this.$message({
                message: this.id ? "修改成功" : "添加成功",
                type: "success"
              });
              this.$emit("close");
            }
          });
        }
      });
    }
  },
  created() {}
};
</script>

<style></style>
